<template>
  <div style="height: 100%">
    <el-card style="margin-top: 20px">
      <h2 style="text-align: center;margin-bottom: 20px">用户管理(包括权限设置)</h2>

      <div>
        <el-row style="margin-bottom: 20px">
          <el-col :span="3" style="line-height: 40px;text-align: center">按姓名查找:</el-col>
          <el-col :span="6"><el-input></el-input></el-col>
          <el-col :span="3" style="line-height: 40px;text-align: center">按所属单位:</el-col>
          <el-col :span="6"><el-input></el-input></el-col>
          <el-col :span="2" :offset="1">
            <el-button type="primary">搜索</el-button>
          </el-col>
          <el-col :span="2" style="margin-left: 5px">
            <el-button type="success" @click="handleAdd">新增用户</el-button>
          </el-col>
        </el-row>


      </div>
      <el-table
          :data="tableData"
          stripe
          header-cell-class-name="headerCellStyle"
          cell-class-name="cellStyle"
          border
          height="calc(100% - 120px)"
          style="width: 100%;">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="gender"></el-table-column>
        <el-table-column label="身份" prop="roleName"></el-table-column>
        <el-table-column label="所属单位" prop="unitName"></el-table-column>
        <el-table-column label="电话" prop="phone"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="text" style="color: red" icon="el-icon-delete">删除</el-button>
            <el-button type="text" style="color:orange" icon="el-icon-setting">权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="500px">
      <span>
        <el-form>
          <el-form-item label="ID:">
            <el-input v-model="id"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input v-model="name"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-input v-model="sex"></el-input>
          </el-form-item>
          <el-form-item label="身份:">
            <el-input v-model="identity"></el-input>
          </el-form-item>
          <el-form-item label="所属单位:">
            <el-input v-model="unit"></el-input>
          </el-form-item>
          <el-form-item label="电话:">
            <el-input v-model="phone"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {pageUsers} from "@/api/user";

export default {
  name: "test",
  data(){
    return{
      title:'',
      tableData:[
        {
          id:1,
          name:'张三',
          sex:'男',
          age:20,
          identity:'用户',
          unit:'中国',
          phone:'11111111111'
        },
        {
          id:2,
          name:'李四',
          sex:'男',
          age:22,
          identity:'管理员',
          unit:'美国',
          phone:'2222222222'
        },
      ],
      dialogVisible:false,
      queryParams: {
        pageSize: 5,
        pageNum: 1
      },

    }
  },

  mounted() {
    pageUsers(this.queryParams).then(resp => {
      console.log(resp.data)
      this.tableData = resp.data.list


    })
  },

  methods:{
    handleAdd(){
      this.title = '新增用户'
      this.dialogVisible = true
    },
    handleEdit(val){
      console.log(val)
      this.title = '编辑用户'
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.el-col{
  margin-top: 30px;
}
/deep/ .cellStyle {
  text-align: center;
}

/deep/ .headerCellStyle {
  text-align: center;
  background: #F8F8F8 !important;
  color: #444;
  height: 50px;
}
</style>
